<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客编辑页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_edit.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>
</head>
<body>
<div class="nav">
    <img src="image/logo2.jpg" alt="">
    <div class="title">我的博客系统</div>
    <div class="spacer"></div>
    <a href="blog_list.jsp">主页</a>
    <a href="blog_edit.jsp">写博客</a>
    <a href="logout">注销</a>
</div>

<div class="blog-edit-container">
    <form id="blogForm" action="updateBlog" method="post">
        <div class="title">
            <input type="text" id="title-input" name="title" placeholder="请输入博客标题" value="<%= request.getAttribute("title") != null ? request.getAttribute("title") : "" %>" required>
            <input type="submit" id="submit" value="保存更改">
        </div>
        <div id="editor">
            <textarea name="content" style="display: none;"><%= request.getAttribute("content") != null ? request.getAttribute("content") : "" %></textarea>
        </div>
    </form>
</div>

<script src="js/app.js"></script>
<script>
    var editor = editormd("editor", {
        width: "100%",
        height: "calc(100% - 50px)",
        markdown: "# 在这里写下一篇博客",
        path: "editor.md/lib/",
        saveHTMLToTextarea: true
    });

    function getLoginStatus() {
        // TODO: 验证登录状态
    }

    function getBlog() {
        var blogId = new URLSearchParams(location.search).get('blogId');
        $.ajax({
            type: 'get',
            url: 'blog' + location.search,   // 带上 blogId 参数
            success: function(blog) {
                $('#title-input').val(blog.title);
                editor.setMarkdown(blog.content);  // 将博客内容填入编辑器
            }
        });
    }

    $('#blogForm').submit(function(event) {
        event.preventDefault();

        var title = $('#title-input').val();
        var content = editor.getMarkdown();
        var blogId = new URLSearchParams(location.search).get('blogId');

        var data = {
            blogId: blogId,
            title: title,
            content: content
        };

        $.ajax({
            type: 'post',
            url: 'updateBlog',  // 后端更新接口
            data: data,
            success: function(response) {
                alert("博客修改成功！");
                window.location.href = 'blog_detail.jsp?blogId=' + blogId;  // 将页面跳转到修改后的博客详情页面
            },
            error: function() {
            }
        });
    });

    getBlog();
    getLoginStatus();
</script>
</body>
</html>
